<template>
  <van-tab title="文档">
    <div class="tab-inner-wrap"
         ref="wrapper">
      <div class="tab-inner">

        <!-- 骨架屏 -->
        <van-skeleton :row="3"
                      v-for="i in skeletonRepeat"
                      :key="i"
                      avatar
                      avatar-shape="square"
                      :loading="skeletonLoading">
          <list-card v-for="(item,index) in data"
                     :key="index"
                     :title="item.fileName"
                     linked
                     rdColor="rgb(102, 102, 102)">
            <template #left-icon>
              <div class="document-icon">
                <img :src="docTypeImg(item.fileName)" />
              </div>
            </template>
            <template #content>
              <span>{{item.date}}</span>
            </template>
            <template #right-area>
              <van-popover v-model:show="showPopover"
                           :actions="actions"
                           @select="onSelect"
                           placement="left">
                <template #reference>
                  <van-icon name="bars"
                            @click="fileId = item.fileId" />
                </template>
              </van-popover>
            </template>
          </list-card>
        </van-skeleton>
        <!-- 空状态 -->
        <van-empty description=""
                   v-if="data.length === 0">
          <template #image>
            <div class="empty-image">
              <img src="/images/detail/icon_empty.png" />
            </div>
          </template>
        </van-empty>

      </div>
    </div>
  </van-tab>
</template>

<script>
import { ref, onMounted, inject, computed, nextTick } from 'vue'
import usebScroll from '@/hooks/usebScroll'
import ListCard from '@/components/ListCard.vue'
import { fileMatcher } from '@/hooks/useDocumentIcon'
import { getSkeletonInstance } from '@/hooks/useSkeleton'
import { getDocument } from '@/api/request/business'
import axios from 'axios'
import store from '@/store'
// 气泡弹出层
const usePopover = () => {
  const showPopover = ref(false)
  const fileId = ref()
  const actions = [
    { text: '下载', },
    { text: '预览' },
  ]

  return {
    showPopover,
    actions,
    fileId
  }
}
export default {
  components: {
    ListCard
  },
  setup () {
    const data = ref([])
    const wrapper = ref()
    const $scroll = usebScroll()
    const { showPopover, actions, fileId } = usePopover()
    const onSelect = (action) => {
      if (action.text === '下载') {
        let downloadUrl
        if (process.env.NODE_ENV === 'production') {
          downloadUrl = axios.defaults.baseURL.split('mobileTerminal')[0]
        } else {
          downloadUrl = window.application.config.development.fileDownPath
        }
        const a = document.createElement('a')
        a.id = 'download'
        a.href = `${downloadUrl}servFileDownLoad?fId=${fileId.value}&token-key=${store.getters.userInfo.token}`
        // 修复firefox中无法触发click
        document.getElementsByTagName('body')[0].append(a)
        a.click()
        document.getElementById('download').remove()
      }
    };
    const { skeletonLoading, skeletonRepeat, hideSkeleton, narrowSkeleton } = getSkeletonInstance()
    const docTypeImg = computed(() => {
      return (fileName) => {
        return fileMatcher(fileName).icon
      }
    })
    const beanId = inject('beanId')
    const id = inject('id')
    const refresh = (options) => {
      if (data.value.length === 0) {
        getDocument({ id, beanId }).then(response => {
          narrowSkeleton()
          data.value.push(...response.body.data.item.reverse())
          hideSkeleton()
          nextTick(() => {
            wrapper.value.style.height = `calc(100vh - ${options.offsetTop})`
            $scroll.initOrRefreshBScroll(wrapper.value)
          })
        })
      }
    }
    return {
      data,
      wrapper,
      refresh,
      docTypeImg,
      skeletonLoading,
      skeletonRepeat,
      showPopover,
      actions,
      onSelect,
      fileId
    }
  }
}
</script>

<style scoped>
.document-icon {
  width: 34px;
  border-radius: 2px;
  height: 34px;
  font-size: 12px;
  line-height: 34px;
  text-align: center;
  /* background: #4073f5; */
  color: #fff;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: 10px;
}
.document-icon img {
  box-shadow: 2px 1px 8px 1px #efeeeb;
}

.document-icon img {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
}
</style>